<template>
  <div>
    <div class="add_user aui-bg-f aui-padded-b-15" id="add_user">
      <div class="list van-hairline--bottom">
        <!-- 淘宝 -->
        <div class="content aui-padded-b-10" v-if="user.type == 1">
          <div class="name aui-ftn14 aui-text-3 aui-font-weight">
            买号登录用户名
          </div>
          <div class="input">
            <input
              type="text"
              name="username"
              v-model="user.username"
              placeholder="点击这里填写"
              class="aui-text-right aui-text-9 aui-ftn13"
            />
          </div>
        </div>
        <!-- 京东 -->
        <div class="content" v-if="user.type == 2">
          <div class="name aui-ftn14 aui-text-3 aui-font-weight">京东帐号</div>
          <div class="input">
            <input
              type="text"
              name="username"
              v-model="user.username"
              placeholder="点击这里填写"
              class="aui-text-right aui-text-9 aui-ftn13"
            />
          </div>
        </div>
        <!-- 拼多多 -->
        <div class="content" v-if="user.type == 3">
          <div class="name aui-ftn14 aui-text-3 aui-font-weight">
            拼多多帐号
          </div>
          <div class="input">
            <input
              type="text"
              name="username"
              v-model="user.username"
              placeholder="点击这里填写"
              class="aui-text-right aui-text-9 aui-ftn13"
            />
          </div>
        </div>
        <!-- 抖音 -->
        <div class="content" v-if="user.type == 4">
          <div class="name aui-ftn14 aui-text-3 aui-font-weight">抖音帐号</div>
          <div class="input">
            <input
              type="text"
              name="username"
              v-model="user.username"
              placeholder="点击这里填写"
              class="aui-text-right aui-text-9 aui-ftn13"
            />
          </div>
        </div>
        <!-- 快手 -->
        <div class="content" v-if="user.type == 5">
          <div class="name aui-ftn14 aui-text-3 aui-font-weight">快手帐号</div>
          <div class="input">
            <input
              type="text"
              name="username"
              v-model="user.username"
              placeholder="点击这里填写"
              class="aui-text-right aui-text-9 aui-ftn13"
            />
          </div>
        </div>
        <!-- 拼多多商家帐号 -->
        <div class="content" v-if="user.type == 6">
          <div class="name aui-ftn14 aui-text-3 aui-font-weight">
            拼多多商家帐号
          </div>
          <div class="input">
            <input
              type="text"
              name="username"
              v-model="user.username"
              placeholder="点击这里填写"
              class="aui-text-right aui-text-9 aui-ftn13"
            />
          </div>
        </div>
        <div class="img_desc" v-if="user.type == 1" v-cloak>
          <img :src="bindname" alt="" @click="fnPreview(bindname)" />
        </div>
      </div>
      <!-- 淘宝 -->
      <div v-if="user.type == 1" v-cloak>
        <div class="list aui-padded-t-10 aui-padded-b-10 van-hairline--bottom">
          <div class="content">
            <div class="name aui-ftn14 aui-text-3 aui-font-weight">
              淘宝等级
            </div>
            <div class="input aui-text-right" @click="level.show_lay = true">
              <div class="aui-text-7 aui-ftn13" v-if="!level_img_">请选择</div>
              <img :src="level_img_" alt="" v-else />
            </div>
          </div>
        </div>
        <div class="list aui-padded-t-10 aui-padded-b-10 van-hairline--bottom">
          <div class="content aui-padded-b-10">
            <div class="name aui-ftn14 aui-text-3 aui-font-weight">
              等级截图
            </div>
          </div>
          <div class="cont_2">
            <div class="img_desc">
              <img :src="level_image" alt="" @click="fnPreview(level_image)" />
            </div>
            <div class="img_cont aui-text-center" @click="image_type = 'level'">
              <van-uploader :after-read="afterRead">
                <div
                  class="aui-ftn14 aui-text-7 aui-text-center"
                  v-if="!user.level_image"
                >
                  上传
                </div>
                <div
                  class="img"
                  :style="{ backgroundImage: 'url(' + user.level_image + ')' }"
                  v-if="user.level_image"
                ></div>
              </van-uploader>
            </div>
          </div>
        </div>
      </div>

      <!-- 京东 -->
      <div v-if="user.type == 2" v-cloak>
        <div class="list aui-padded-t-10 aui-padded-b-10 van-hairline--bottom">
          <div class="content">
            <div class="name aui-ftn14 aui-text-3 aui-font-weight">京享值</div>
            <div class="input">
              <input
                type="text"
                name="username"
                v-model="user.value"
                placeholder="请填写"
                class="aui-text-right aui-ftn13"
              />
            </div>
          </div>
        </div>
        <div class="list aui-padded-t-10 aui-padded-b-10 van-hairline--bottom">
          <div class="content aui-padded-b-10">
            <div class="name aui-ftn14 aui-text-3 aui-font-weight">
              等级截图
            </div>
          </div>
          <div class="cont_2">
            <div class="img_desc" @click="fnPreview(jd_image)">
              <img :src="jd_image" alt="" />
            </div>
            <div class="img_cont aui-text-center" @click="image_type = 'level'">
              <van-uploader :after-read="afterRead">
                <div
                  class="aui-ftn14 aui-text-7 aui-text-center"
                  v-if="!user.level_image"
                >
                  上传
                </div>
                <div
                  class="img"
                  :style="{ backgroundImage: 'url(' + user.level_image + ')' }"
                  v-if="user.level_image"
                ></div>
              </van-uploader>
            </div>
          </div>
        </div>
      </div>

      <div class="list aui-padded-t-10 aui-padded-b-10 van-hairline--bottom">
        <div class="content">
          <div class="name aui-ftn14 aui-text-3 aui-font-weight">收货城市</div>
          <div class="input" @click="city.is_show_address = true">
            <div
              class="aui-text-7 aui-ftn13 aui-text-right"
              v-text="city.select_city"
            ></div>
          </div>
        </div>
      </div>
      <div class="list aui-padded-t-10 aui-padded-b-10 van-hairline--bottom">
        <div class="content">
          <div class="name aui-ftn14 aui-text-3 aui-font-weight">性别</div>
          <van-radio-group
            v-model="user.gender"
            direction="horizontal"
            class="input gender aui-ftn13"
          >
            <van-radio name="1">男</van-radio>
            <van-radio name="2">女</van-radio>
          </van-radio-group>
        </div>
      </div>
      <div class="list aui-padded-t-10 aui-padded-b-10 van-hairline--bottom">
        <div class="content">
          <div class="name aui-ftn14 aui-text-3 aui-font-weight">消费层级</div>
          <div class="input aui-text-right">
            <van-dropdown-menu>
              <van-dropdown-item v-model="user.consume" :options="xf_level" />
            </van-dropdown-menu>
          </div>
        </div>
      </div>
      <div class="list aui-padded-t-10 aui-padded-b-10 van-hairline--bottom">
        <div class="content">
          <div class="name aui-ftn14 aui-text-3 aui-font-weight">人群标签</div>
          <div class="input aui-text-right">
            <van-dropdown-menu>
              <van-dropdown-item v-model="user.label" :options="group_tag" />
            </van-dropdown-menu>
          </div>
        </div>
      </div>
      <div class="list aui-padded-t-10 aui-padded-b-10 van-hairline--bottom">
        <div class="content" @click="category.show_lay = true">
          <div class="name aui-ftn14 aui-text-3 aui-font-weight">常购类目</div>
          <div class="input">
            <div
              class="aui-text-7 aui-ftn13 aui-text-right"
              v-text="category.select_categories"
            ></div>
          </div>
        </div>
      </div>
      <div class="list aui-padded-t-10 aui-padded-b-10 aui-text-7 aui-ftn14">
        每个平台限绑定<span class="aui-text-red">5个</span>买号
      </div>
      <div
        class="confirm_btn aui-text-f aui-bg-red aui-ftn16 aui-text-center"
        @click="fnAddUser"
      >
        确认添加
      </div>

      <!-- 收货城市 -->
      <van-popup v-model="city.is_show_address" position="bottom">
        <van-area
          title="所在地"
          :area-list="city.citys"
          item-height="60"
          @confirm="fnSelectCity"
          @cancel="city.is_show_address = false"
        />
      </van-popup>
      <!-- 生日 -->
      <van-popup v-model="birthday.is_show_birthday" position="bottom">
        <van-datetime-picker
          v-model="birthday.currentDate"
          type="date"
          title="选择出生日期"
          :min-date="birthday.minDate"
          :max-date="birthday.maxDate"
          @confirm="fnOpenSelector"
          @cancel="birthday.is_show_birthday = false"
          item-height="40"
        />
      </van-popup>
      <!-- 常购类目 -->
      <van-overlay :show="category.show_lay" :z-index="999">
        <div class="wrapper">
          <div class="user_category aui-bg-f">
            <div class="content">
              <van-row>
                <van-checkbox-group
                  v-model="category.select_items"
                  direction="horizontal"
                  @change="fnConfirm"
                >
                  <van-col
                    span="12"
                    v-for="(item, index) in category.items"
                    :key="index"
                    class="aui-padded-t-10 aui-padded-b-10"
                  >
                    <van-checkbox :name="item" shape="square">{{
                      item.name
                    }}</van-checkbox>
                  </van-col>
                </van-checkbox-group>
              </van-row>
              <div
                class="aui-text-red aui-padded-t-15 aui-padded-b-15 aui-ftn14"
                v-if="category.select_items.length < 1"
              >
                请选择1到5个常购类目！
              </div>
              <div
                class="aui-text-red aui-padded-t-15 aui-padded-b-15 aui-ftn14"
                v-if="category.select_items.length > 5"
              >
                最多选择5项！
              </div>
            </div>
            <div
              class="close_btn aui-bg-red aui-text-center aui-ftn16 aui-text-f"
              @click="category.show_lay = false"
            >
              确定
            </div>
          </div>
        </div>
      </van-overlay>

      <!-- 淘宝等级 -->
      <van-overlay :show="level.show_lay" :z-index="9999">
        <div class="wrapper">
          <div
            class="add_level aui-bg-f"
            :style="{ 'max-height': height + 'px' }"
          >
            <div class="content" id="level" style="overflow: scroll!important;">
              <div
                class="list"
                v-for="(item, index) in level.items"
                :key="index"
                @touchstart="onSyTouchStart"
                @touchmove="onSyTouchMove"
                @touchend="fnSelectLevel(index)"
              >
                <img :src="item" alt="" />
              </div>
            </div>
            <div
              class="close_btn aui-bg-f aui-text-center aui-ftn16 aui-text-7"
              @click="level.show_lay = false"
            >
              关闭
            </div>
          </div>
        </div>
      </van-overlay>
    </div>
  </div>
</template>

<script>
import "@/styles/add_user.css";
import province_list from "@/service/city.js";
import User from "@/service/user.js";
export default {
  name: "User",
  data() {
    return {
      active: 0,
      bindname: "",
      level_image: "",
      image_type: "",
      user: {
        uid: "",
        type: 1,
        username: "",
        level: 0,
        level_image: "",
        value: "",
        level_image_file: "",
        province: "",
        city: "",
        area: "",
        address: "",
        birthday: "",
        gender: "1",
        consume: 0,
        label: 0,
        category: "",
      },
      level_img_: "",
      xf_level: [
        {
          value: 0,
          text: "请选择",
        },
        {
          value: 1,
          text: "10-50元",
        },
        {
          value: 2,
          text: "51-150元",
        },
        {
          value: 3,
          text: "151-250元",
        },
        {
          value: 4,
          text: "351-500元",
        },
        {
          value: 5,
          text: "500元以上",
        },
      ],
      group_tag: [
        {
          value: 0,
          text: "请选择",
        },
        {
          value: 1,
          text: "在校学生",
        },
        {
          value: 2,
          text: "职场白领",
        },
        {
          value: 3,
          text: "技术蓝领",
        },
        {
          value: 4,
          text: "家庭主妇",
        },
        {
          value: 5,
          text: "专职司机",
        },
        {
          value: 6,
          text: "公务员",
        },
        {
          value: 7,
          text: "医护人员",
        },
        {
          value: 8,
          text: "餐饮娱乐",
        },
        {
          value: 9,
          text: "自由职业",
        },
      ],
      jd_image: "",
      category: {
        select_items: [],
        items: [],
        category_items: "",
        select_categories: "",
        show_lay: false,
      },
      city: {
        select_city: "请选择",
        is_show_address: false,
      },
      birthday: {
        is_show_birthday: false,
        minDate: new Date(1920, 0, 1),
        maxDate: new Date(),
        currentDate: new Date(),
      },
      level: {
        show_lay: false,
        items: [
          require("../../../../assets/tao_level1.png"),
          require("../../../../assets/tao_level2.png"),
          require("../../../../assets/tao_level3.png"),
          require("../../../../assets/tao_level4.png"),
          require("../../../../assets/tao_level5.png"),
          require("../../../../assets/tao_level6.png"),
          require("../../../../assets/tao_level7.png"),
          require("../../../../assets/tao_level8.png"),
          require("../../../../assets/tao_level9.png"),
          require("../../../../assets/tao_level10.png"),
          require("../../../../assets/tao_level11.png"),
          require("../../../../assets/tao_level12.png"),
          require("../../../../assets/tao_level13.png"),
          require("../../../../assets/tao_level14.png"),
          require("../../../../assets/tao_level15.png"),
        ],
      },
      height: 0,
      clickFlag: false,
    };
  },
  props: ["type"],
  mounted() {
    this.bindname = this.utils.ossUrl + "/uploads/image/username.jpg";
    this.level_image = this.utils.ossUrl + "/uploads/image/level_image.jpg";
    this.jd_image = this.utils.ossUrl + "/uploads/image/jd_level_image.jpg";
    this.city.citys = province_list;
    this.user.birthday = this.fnFormatDate(this.birthday.currentDate);
    this.user.type = this.type;
    this.height = document.documentElement.clientHeight;
    this.init();
  },
  methods: {
    // 用于判断滑动还是点击swiper
    onSyTouchStart(e) {
      this.clickFlag = false;
    },
    // 用于判断滑动还是点击
    onSyTouchMove(e) {
      this.clickFlag = true;
    },
    // 选择等级
    fnSelectLevel: function(index) {
      if (this.clickFlag) {
        // 滑动
      } else {
        // 点击
        this.level_img_ = this.level.items[index];
        this.user.level = index + 1;
        this.level.show_lay = false;
      }
    },
    init: function() {
      this.fnGetTabData();
      var arr = [];
    },
    // 类目
    fnConfirm: function() {
      if (
        this.category.select_items.length > 0 &&
        this.category.select_items.length < 6
      ) {
        var arr = [];
        var ids = [];
        this.category.select_items.forEach(function(item, index) {
          ids.push(item.id);
        });
        this.category.select_items.forEach(function(item, index) {
          arr.push(item.name);
        });
        this.category.select_categories = arr.join(",");
        this.user.category = ids;
      } else if (this.category.select_items.length == 0) {
        this.category.select_categories = "";
        this.user.category = [];
      }
    },
    // 分类
    fnGetTabData: function() {
      this.category.items = this.$store.state.category
        ? this.$store.state.category
        : [];
      if (this.category.items.length == 0) {
        User.fnGetCate().then((res) => {
          if (res && res.status) {
            this.category.items = res.data;
          }
        });
      }
    },
    fnUpload: function(file) {
      if (file) {
        switch (this.image_type) {
          case "level":
            this.user.level_image = file.content;
            this.user.level_image_file = file.file;
            break;
        }
      }
    },

    afterRead(file) {
      //判断图片的大小，单位是字节
      if (file.file.size > 3 * 1024 * 1024) {
        let vm = this;
        this.utils.fnChangeFile(file, { w: 200, h: 300 }, function(res) {
          vm.fnUpload(res);
        });
      } else {
        // 符合大小的，直接上传
        this.fnUpload(file);
      }
    },
    // 图片预览
    fnPreview(img) {
      this.utils.fnPreviewPic([img]);
    },
    // 请选择收货地址
    fnSelectCity: function(val) {
      var city = "";
      val.forEach((item) => {
        city += item.name;
      });
      this.city.select_city = city;
      this.city.is_show_address = false;
      this.user.province = val[0].name;
      this.user.city = val[1].name;
      this.user.area = val[2].name;
    },
    fnFormatDate: function(date) {
      const Y = date.getFullYear() + "/";
      const M =
        (date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1) + "/";
      const D = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
      return Y + M + D;
    },
    fnOpenSelector: function(val) {
      const date = new Date(val);
      this.birthday.is_show_birthday = false;
      this.user.birthday = this.fnFormatDate(date);
    },
    // 提交资料
    fnAddUser: function() {
      let _param = {}, types = [3,4,5,6]
      if (this.fnToggle()) {
        if (this.type == 1) {
          _param = {
            uid: this.$store.state.uid,
            username: this.user.username,
            gender: this.user.gender,
            birthday: this.user.birthday,
            type: this.type,
            level: this.user.level,
            level_image: this.user.level_image_file,
            value: this.user.value,
            province: this.user.province,
            city: this.user.city,
            area: this.user.area,
            address: this.user.address,
            consume: this.user.consume,
            label: this.user.label,
            category: this.user.category,
          };
        }
        if (this.type == 2) {
          _param = {
            uid: this.$store.state.uid,
            username: this.user.username,
            gender: this.user.gender,
            birthday: this.user.birthday,
            type: this.type,
            level_image: this.user.level_image_file,
            value: this.user.value,
            province: this.user.province,
            city: this.user.city,
            area: this.user.area,
            address: this.user.address,
            consume: this.user.consume,
            label: this.user.label,
            category: this.user.category,
          };
        }

        if (types.includes(this.type)) {
          _param = {
            uid: this.$store.state.uid,
            username: this.user.username,
            gender: this.user.gender,
            birthday: this.user.birthday,
            type: this.type,
            province: this.user.province,
            city: this.user.city,
            area: this.user.area,
            address: this.user.address,
            consume: this.user.consume,
            label: this.user.label,
            category: this.user.category,
          };
        }
        let param = new FormData(); // 创建form对象
        for (var i in _param) {
          param.append(i, _param[i]); // 添加form表单中其他数据
        }
        User.fnAddAccount(param).then(
          (data) => {
            if (data) {
              this.utils.fnMsg(data.msg);
              if (data.status) {
                var vm = this;
                setTimeout(function() {
                  vm.utils.fnOpenCommon(vm, {
                    name: "account",
                    query: { title: "已添加", text: "添加买号" },
                  });
                }, 2000);
              }
            }
          },
          (error) => {
            // 执行失败的回调函数
          }
        );
      }
    },
    // 淘宝验证
    fnTbToggle: function() {
      var valueFormat = /^[0-9]*$/;
      this.user.value = this.user.value.trim();
      if (!this.user.level) {
        this.utils.fnMsg("请选择淘宝等级");
        return false;
      } else if (!this.user.level_image) {
        this.utils.fnMsg("请上传等级截图");
        return false;
      } else {
        return true;
      }
    },
    // 京东验证
    fnJdToggle: function() {
      var valueFormat = /^[0-9]*$/;
      this.user.value = this.user.value.trim();
      if (!this.user.level_image) {
        this.utils.fnMsg("请上传等级截图");
        return false;
      } else if (!this.user.value) {
        this.utils.fnMsg("请填写京享值");
        return false;
      } else if (!valueFormat.test(this.user.value)) {
        this.utils.fnMsg("京享值为数值！");
        return false;
      } else {
        return true;
      }
    },
    fnToggle: function() {
      var valueFormat = /^[0-9]*$/;
      if (!this.user.username) {
        this.utils.fnMsg("请填写用户名");
        return false;
      }
      if (this.user.type == 1) {
        if (this.fnTbToggle()) {
          return this.fnToggleAll();
        }
      } else if (this.user.type == 2) {
        if (this.fnJdToggle()) return this.fnToggleAll();
      } else {
        return this.fnToggleAll();
      }
    },
    fnToggleAll: function() {
      if (!this.user.city) {
        this.utils.fnMsg("请选择收货城市");
        return false;
      } else if (!this.user.consume) {
        this.utils.fnMsg("请选择消费层级");
        return false;
      } else if (!this.user.label) {
        this.utils.fnMsg("请选择人群标签");
        return false;
      } else if (this.user.category.length == 0) {
        this.utils.fnMsg("请至少选择一个常购类目");
        return false;
      } else {
        return true;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 0 30px;
  div.user_category {
    border-radius: 5px;
  }
  div.user_category div.content {
    border-radius: 5px;
    padding: 10px 25px;
  }
  div.user_category div.content div.item {
    padding-bottom: 20px;
  }
  div.user_category div.close_btn {
    height: 40px;
    line-height: 40px;
    border-radius: 0 0 5px 5px;
    border-top: 1px solid #eee;
  }
  div.add_level {
    position: absolute;
    top: 50%;
    right: 10%;
    left: 10%;
    margin: auto;
    border-radius: 0.375rem;
    overflow-y: auto;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
  }
  div.add_level div.content {
    border-radius: 5px 5px 0 0;
    padding: 10px 15px;
  }
  div.add_level div.content div.list {
    padding-bottom: 10px;
    img {
      height: 10px;
    }
  }
  div.add_level div.content div.list:nth-child(5n) {
    margin-bottom: 5px;
  }
  div.add_level div.close_btn {
    height: 36px;
    line-height: 36px;
    border-radius: 0 0 5px 5px;
    border-top: 1px solid #eee;
  }
}
</style>
